<script setup>

import {BaseImgUrl} from "../../utils/lshttp";
import {ref, onMounted} from "vue";
import {getShopListAPI} from "../../services";
import {categoryGFAPI} from "../../services/search";

const isShowChoose = ref(false)
const props = defineProps({
  sortType: {
    type: Number,
    default: 0
  },
  type1: {
    type: Number,
    default: 1,
  },
  type2: {
    type: Number,
    default: 1
  },
  type3: {
    type: Number,
    default: 1
  },
  type4: {
    type: Number,
    default: 0
  },
  overlordMealClassList: {
    type: Array
  }
})

const emits = defineEmits([
  'update:sortType',
  'update:type1',
  'update:type2',
  'update:type3',
  'update:type4',
  'change',
  'sortChange',
  'headerIndex',
  'categoryChange', // 霸王餐nav筛选事件
  'categoryChangeGf', // 官返商nav筛选事件
])

onMounted(() => {

})
const sortList = ref([
  {
    type: 1,
    name: '综合排序'
  },
  {
    type: 3,
    name: '距离最近'
  },
  {
    type: 4,
    name: '补贴最多'
  },
  {
    type: 5,
    name: '名额最多'
  },
])
const sortList1 = ref([
  {
    type: 0,
    show: true,
    name: '全部'
  },
  {
    type: 1,
    show: true,
    name: '需要评价'
  },
  {
    type: 2,
    show: true,
    name: '无需评价'
  },
])
const sortList2 = ref([
  {
    type: 0,
    show: true,
    name: '全部'
  },
  {
    type: 1,
    show: true,
    name: '美团'
  },
  {
    type: 2,
    show: true,
    name: '饿了么'
  },
  {
    type: 3,
    show: true,
    name: '京东'
  }
])
/* 点餐类型 */
const dishTypeList = ref([
  {
    type: 1,
    icon: '/home/sort/sort_icon01.png',
    name: '早餐'
  },
  {
    type: 2,
    icon: '/home/sort/sort_icon02.png',
    name: '午餐'
  },
  {
    type: 3,
    icon: '/home/sort/sort_icon03.png',
    name: '奶茶果汁'
  },
  {
    type: 4,
    icon: '/home/sort/sort_icon04.png',
    name: '汉堡炸鸡'
  },
  {
    type: 5,
    icon: '/home/sort/sort_icon05.png',
    name: '烧烤夜宵'
  },
  {
    type: 6,
    icon: '/home/sort/sort_icon06.png',
    name: '米线面条'
  },
    {
    type: 7,
    icon: '/home/sort/sort_icon07.png',
    name: '轻食简餐'
  },
    {
    type: 8,
    icon: '/home/sort/sort_icon08.png',
    name: '大牌连锁'
  },
    {
    type: 9,
    icon: '/home/sort/sort_icon09.png',
    name: '其他'
  },
 ])
// 筛选tabs索引变量
const header_index = ref(1)
// 筛选tabs事件
const clickMenu = (e) => {
  header_index.value = e
  // 清空分类选中状态
  cateActive.value = ''
  console.log("点击了", e)
  emits('headerIndex', e)
  if (e === 2){
    categoryGFFun()
  }
}

// 官返分类数据
const catelist = ref([])
// 获取分类数据
const categoryGFFun = async () => {
  // 获取分类数据
  const res = await categoryGFAPI()
  console.log("分类数据", res)
  catelist.value = res.result
}
// 显示筛选弹框
const showCheckBox = () => {
  // if (props.sortType === 2) {
  //   uni.showToast({title: "官返商家无筛选条件", icon: "none"})
  //   return
  // }
  isShowChoose.value = !isShowChoose.value
}
// 推荐选中图标颜色
const filter_color = ref(true)
const checkShop = (type) => {
  if (type === 0) {
    console.log('推荐商家无筛选条件', type)
    filter_color.value = true
    emits('update:sortType', type)
    emits('change', type)
    return
  }
  if (type === 1 && props.sortType === 1) {
    filter_color.value = false
    return
  }
  if (type === 2 && props.sortType === 2) {
    filter_color.value = false
    return
  }
  if (type === 1) {
    filter_color.value = false
    sortList1.value = [
      {
        type: 2,
        show: true,
        name: '无需点评'
      },
    ]
    emits('update:type2', sortList1.value[0].type)
  } else {
    filter_color.value = false
    sortList1.value = [
      {
        type: 0,
        show: true,
        name: '全部'
      },
      {
        type: 1,
        show: true,
        name: '需要点评'
      },
      {
        type: 2,
        show: true,
        name: '无需点评'
      },
    ]
    emits('update:type2', sortList1.value[0].type)
  }
  if (type === 2) {
    filter_color.value = false
    reset()
    sortList.value = [
      {
        type: 1,
        name: '综合'
      },
      {
        type: 3,
        name: '距离最近'
      },
      {
        type: 4,
        name: '补贴最多'
      },
    ]
    // sortList1.value = []
    sortList2.value = [
      {
        type: 0,
        show: true,
        name: '美团'
      }
    ]
  } else {
    filter_color.value = false
    sortList.value = [
      {
        type: 1,
        name: '综合排序'
      },
      {
        type: 3,
        name: '距离最近'
      },
      {
        type: 4,
        name: '补贴最多'
      },
      {
        type: 5,
        name: '名额最多'
      },
    ]
    sortList2.value = [
      {
        type: 0,
        show: true,
        name: '全部'
      },
      {
        type: 1,
        show: true,
        name: '美团'
      },
      {
        type: 2,
        show: true,
        name: '饿了么'
      },{
        type: 3,
        show: true,
        name: '京东'
      }
    ]
  }
  emits('update:sortType', type)
  emits('change', type)
  console.log("type=", type, "sortType=",props.sortType)
  // reset()
}
const checkShopRe = (type) => {
  if (type === 1) {
    sortList1.value = [
      {
        type: 2,
        show: true,
        name: '无需点评'
      },
    ]
    emits('update:type2', sortList1.value[0].type)
  } else {
    sortList1.value = [
      {
        type: 0,
        show: true,
        name: '全部'
      },
      {
        type: 1,
        show: true,
        name: '需要点评'
      },
      {
        type: 2,
        show: true,
        name: '无需点评'
      },
    ]
    emits('update:type2', sortList1.value[0].type)
  }
  if (type === 2) {
    reset()
    sortList.value = [
      {
        type: 1,
        name: '综合'
      },
      {
        type: 3,
        name: '距离最近'
      },
      {
        type: 4,
        name: '补贴最多'
      },
    ]
    sortList1.value = []
    sortList2.value = [
      {
        type: 0,
        show: true,
        name: '美团'
      }
    ]
  } else {
    sortList.value = [
      {
        type: 1,
        name: '综合排序'
      },
      {
        type: 3,
        name: '距离最近'
      },
      {
        type: 4,
        name: '补贴最多'
      },
      {
        type: 5,
        name: '名额最多'
      },
    ]
    sortList2.value = [
      {
        type: 0,
        show: true,
        name: '全部'
      },
      {
        type: 1,
        show: true,
        name: '美团'
      },
      {
        type: 2,
        show: true,
        name: '饿了么'
      },{
        type: 3,
        show: true,
        name: '京东'
      }
    ]
  }
}
defineExpose({checkShopRe})
// 是否显示有单商家
const shopHaveOrder = () => {
  // if (props.sortType === 2) {
  //   uni.showToast({title: "官返商家无筛选条件", icon: "none"})
  //   return
  // }
  console.log('type4==', props.type4)
  let is_orderable = props.type4 === 0 ? 1 : 0
  emits('update:type4', props.type4 === 1 ? 0 : 1)
  emits('change', {is_orderable: is_orderable})
}
// 霸王餐的nav筛选
const cateActive = ref()
const categoryChange = (item, index) => {
  console.log("item=", item, "index=", index)
  cateActive.value = index
  emits('categoryChange', item.id)
}
// 官返商的nav筛选
const categoryChangeGf = (item, index) => {
  console.log("item=", item, "index=", index)
  cateActive.value = index
  emits('categoryChangeGf', item.code)
}
//选择排序
const chosePX = (index) => {
  emits('update:type1', sortList.value[index].type)
}
//选择点评
const choseDP = (index) => {
  emits('update:type2', sortList1.value[index].type)
}
//选择平台
const chosePT = (index) => {
  emits('update:type3', sortList2.value[index].type)
}
const reset = () => {
  emits('update:type1', sortList.value[0].type)
  emits('update:type2', sortList1.value[0].type)
  emits('update:type3', sortList2.value[0].type)
  // emits('update:type4', 0)
  // uni.showToast({title: "已重置", icon: "none"})
}
const yes = () => {
  isShowChoose.value = false;
  emits('sortChange')
}

</script>

<template>
  <view>
    <!--筛选内容tabs-->
    <view class="sortTabs">
      <view class="sortTabs_left">
        <view class="sortTabs_left_item" :class="header_index===1 ? 'item_active' : ''" :key="header_index" @click="clickMenu(1)">
          附近霸王餐
          <text v-if="header_index===1" class="active_line"></text>
        </view>
        <view class="sortTabs_left_item" :class="header_index===2 ? 'item_active' : ''" :key="header_index" @click="clickMenu(2)">
          <text>官返霸王餐</text>
          <view class="sortTabs_left_item_sub">
            <image :src="BaseImgUrl + '/home/index_tabs_bg01.png'" mode="widthFix" style="width: 130rpx;height: 32rpx;"></image>
            <text class="sortTabs_left_item_sub_txt">秒返秒提现</text>
          </view>
          <text v-if="header_index===2" class="active_line" style="left: 20%;margin: 0;"></text>
        </view>
      </view>
      <view v-if="header_index === 1" @tap="shopHaveOrder" class="sortTabs_right">
        <text style="font-size: 24rpx;">只看可抢</text>
        <view :class="'buttonBg ' + (type4 !== 1?'buttonUn':'')">
          <text class="buttonOn"></text>
        </view>
      </view>
    </view>
    <!--筛选nav-->
    <view class="sortNav">
      <scroll-view scroll-x="true" class="sortNav_scroll">
        <view v-if="header_index === 1" class="scrollx_items" v-for="(item,index) in overlordMealClassList" :key="index" @click="categoryChange(item,index)">
          <view class="sortNav_item_img">
            <image class="nav-icon" :src="item.image" mode="widthFix" style="width: 56rpx;height: 56rpx;object-fit: cover;"></image>
          </view>
          <view class="menu_text" :style="{color: index === cateActive ? '#ff7900' : '#666666' }">{{ item.name }}</view>
        </view>
        <view v-if="header_index === 2" class="scrollx_items" v-for="(item,index) in catelist" :key="index" @click="categoryChangeGf(item,index)">
          <view class="sortNav_item_img">
            <image class="nav-icon" :src="item.image" mode="widthFix" style="width: 56rpx;height: 56rpx;object-fit: cover;"></image>
          </view>
          <view class="menu_text" :style="{color: index === cateActive ? '#ff7900' : '#666666' }">{{ item['name'] }}</view>
        </view>
      </scroll-view>
    </view>
    <!--筛选条件-->
    <view v-if="header_index === 1" class="cateCheck">
      <scroll-view scroll-x="true" style="white-space: nowrap;">
        <view @tap="checkShop(0)" data-type=0 :class="[sortType === 0 ?'checkShopType':'btnmoren']" >
          推荐
          <view style="display: inline-block;width: 20rpx;height: 20rpx;"><u-icon name="arrow-down-fill" size="12" :color="filter_color ? '#FF800E' : '#666666'"></u-icon></view>
        </view>
        <view @tap="checkShop(4)" data-type=4 :class="[sortType === 4 ?'checkShopType':'btnmoren']">
          返现最高
        </view>
        <view @tap="checkShop(5)" data-type=5 :class="[sortType === 5 ?'checkShopType':'btnmoren']">
          新店
        </view>
        <view @tap="checkShop(6)" data-type=6 :class="[sortType === 6 ?'checkShopType':'btnmoren']">
          无需评鉴
        </view>
        <view @tap="checkShop(7)" data-type=7 :class="[sortType === 7 ?'checkShopType':'btnmoren']">
          品质商家
        </view>
        <!--<view @tap="checkShop(2)" data-type=2 :class="[sortType === 2?'checkShopType':'btnmoren']">
          官返
        </view>-->
      </scroll-view>
      <view class="filter" @tap="showCheckBox">
        <text>筛选</text>
        <image :src="BaseImgUrl + '/home/sort/filter_icon.png'" mode="widthFix" style="width: 30rpx;margin-left: 4rpx;"></image>
      </view>
    </view>
  </view>
  <u-popup :show="isShowChoose" mode="bottom" :round="10" @close="isShowChoose = false" closeable>
    <view class="checkBox">
      <view class="check_top">
        筛选
      </view>
      <view class="title">
        排序
      </view>
      <text class="item" v-for="(item, index) in sortList" :key="index" @click="chosePX(index)">
        <text :class="[item.type === type1?'checkShopType':'btnmoren1']">{{ item.name }}</text>
      </text>
      <view class="title" v-if="sortList1.length>0">
        点评
      </view>
      <text class="item" v-for="(item, index) in sortList1" :key="index" @click="choseDP(index)">
        <text :class="[item.type === type2?'checkShopType':'btnmoren1']">{{ item.name }}</text>
      </text>
      <view class="title">
        所属平台
      </view>
      <text class="item" v-for="(item, index) in sortList2" :key="index" @click="chosePT(index)">
        <text :class="[item.type === type3?'checkShopType':'btnmoren1']">{{ item.name }}</text>
      </text>
      <view class="bottom">
        <text class="reset" @click="reset">重置</text>
        <text class="yes" @click="yes">确定</text>
      </view>
      <view style="height: 30rpx"></view>
      <!-- #ifdef H5 -->
      <view class="margin_b"></view>
      <!-- #endif -->
    </view>
  </u-popup>
</template>

<style scoped lang="scss">
/* 筛选css */
.sortTabs{
  padding: 10rpx 20rpx 20rpx;
  display: flex;
  justify-content: space-between;
  .sortTabs_left{
    display: flex;
    align-items: center;
    .sortTabs_left_item{
      height: 80rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #696969;
      line-height: 44rpx;
      margin-right: 50rpx;
      display: flex;
      align-items: center;
      position: relative;
      .sortTabs_left_item_sub{
        padding-top: 10rpx;
        font-size: 22rpx;
        color: #FFFFFF;
        position: relative;
        .sortTabs_left_item_sub_txt{
          position: absolute;
          top: 2rpx;
          left: 10rpx;
          width: 100%;
          height: 50rpx;
          line-height: 50rpx;
          z-index: 1;
        }
      }
    }
    .item_active{
      color: #333333;
    }
    .active_line{
      width: 40rpx;
      height: 8rpx;
      border-radius: 100rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: linear-gradient( 270deg, #FF8118 0%, #FF5429 100%);
    }
    .sortTabs_left_item:last-child{
      margin-right: 0;
    }
  }
  .sortTabs_right{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
  }
}
/* 筛选nav css */
.sortNav{
   height: 104rpx;
}
.sortNav_scroll {
  white-space: nowrap;
}
.scrollx_items {
  width: 100rpx;
  height: 100%;
  margin: 0 20rpx;
  display: inline-block;
  text-align: center;
  .sortNav_item_img {
    width: 56rpx;
    height: 56rpx;
    margin: 0 auto;
  }
  .menu_text {
    padding-top: 10rpx;
    font-size: 26rpx;
    line-height: 36rpx;
    color: #666666;
  }
}

.scrollx_items:last-child {
  //margin-right: 0;
  display: inline-block;
}
/* 首页筛选 */
.cateCheck {
  //width: 100% !important;
  font-size: 26rpx;
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0 0 20rpx;
}

/* .cateCheck > view image {
  width: 12rpx;
  height: 8rpx;
  position: relative;
  left: 8rpx;
  top: -4rpx;
} */

.buttonBg {
  width: 58rpx;
  height: 30rpx;
  margin-left: 10rpx;
  border-radius: 40rpx;
  background: linear-gradient(140deg, #FECC32 0%, #FECC32 100%);
  position: relative;
  display: inline-block;
}

.buttonOn {
  position: absolute;
  width: 24rpx;
  height: 24rpx;
  background-color: white;
  border-radius: 40rpx;
  top: 4rpx;
  right: 4rpx;
}

.cateCheck .btnmoren {
  color: #222;
  background-color: #F6F6F6;
  border-radius: 10rpx;
  padding: 14rpx 26rpx;
  margin: 0 10rpx;
  text-align: center;
  font-size: 24rpx;
  height: 28rpx;
  line-height: 28rpx;
  display: inline-block;
}
.cateCheck .btnmoren:first-child {
  margin-left: 0;
}
.cateCheck .filter {
  color: #222;
  background-color: #FFFFFF;
  padding: 14rpx 20rpx;
  text-align: center;
  font-size: 24rpx;
  height: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cateCheck .checkShopType {
  /* #ifdef H5 */
  height: 30rpx;
  line-height: 30rpx;
  /* #endif */
  /* #ifdef MP || APP-PLUS */
  height: 32rpx;
  line-height: 32rpx;
  /* #endif */
  color: #FF7900;
  background: #FFF7EF;
  border: 2rpx solid #FFBC7E;
  border-radius: 12rpx;
  padding: 12rpx 26rpx;
  text-align: center;
  font-size: 24rpx;
  margin: 0 10rpx;
  display: inline-block;
}
.cateCheck .checkShopType{
  margin-left: 0;
  margin-right: 10rpx;
}

.buttonUn {
  background: #E1E1E1;
}

.buttonUn .buttonOn {
  left: 4rpx;
}

.checkBox {
  //width: 100%;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 32rpx;
}

.checkBox {
  .check_top {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    border-bottom: 1px #E9E9E9 solid;
    font-weight: bold;
    font-size: 32rpx;
  }

  .title {
    font-weight: bold;
    font-size: 28rpx;
    margin-top: 24rpx;
    margin-bottom: 14rpx;
  }

  .item {
    margin-right: 16rpx;
    color: #FFFFFF;
  }

  .checkShopType {
    background: #FC754A;
    border: #FC754A 1rpx solid;
    border-radius: 10rpx;
    text-align: center;
    font-size: 24rpx;
    padding: 10rpx 26rpx;
    display: inline-block;
  }

  .btnmoren1 {
    margin: 6rpx 0;
    color: #999999;
    border: #BBBBBB 1rpx solid;
    background-color: #ffffff;
    border-radius: 10rpx;
    text-align: center;
    font-size: 24rpx;
    padding: 10rpx 26rpx;
    display: inline-block;
  }

  .margin_b {
    margin-bottom: 120rpx;
  }

  .bottom {
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    margin-top: 38rpx;

    .reset {
      border-radius: 120rpx;
      border: #AAAAAA 1rpx solid;
      color: #999999;
      padding: 16rpx 60rpx;
      margin-right: 20rpx;
    }

    .yes {
      background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
      border-radius: 120rpx;
      color: #FFFFFF;
      padding: 16rpx 60rpx;
    }
  }
}
</style>
